<template>
  <div>
      <el-row :gutter="15">
        <el-form ref="elForm" :model="customer" :rules="rules" size="medium" label-width="100px">
          <el-col :span="12">
            <el-form-item label="客户名称：" prop="customerName">
              <el-input v-model="customer.customerName" placeholder="请输入客户名称客户名称" clearable
                :style="{width: '100%'}"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="客户公司：" prop="customerCompany">
              <el-input v-model="customer.customerCompany" placeholder="选填项" clearable :style="{width: '100%'}">
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="手机号码：" prop="phone">
              <el-input v-model="customer.phone" placeholder="请输入手机号码" clearable :style="{width: '100%'}">
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="制作要求：" prop="makeId">
              <el-select v-model="customer.makeId" placeholder="请选择制作要求" clearable :style="{width: '100%'}">
                <el-option v-for="(item, index) in craftLevels" :key="index" :label="item.label"
                  :value="item.id" :disabled="item.disabled"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="消费等级：" prop="consumeId">
              <el-select v-model="customer.consumeId" placeholder="请选择消费等级" clearable :style="{width: '100%'}">
                <el-option v-for="(item, index) in consumeLevels" :key="index" :label="item.label"
                  :value="item.id" :disabled="item.disabled"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="客户等级：" prop="levelId">
              <el-select v-model="customer.levelId" placeholder="请选择客户等级" clearable :style="{width: '100%'}">
                <el-option v-for="(item, index) in members" :key="index" :label="item.label"
                  :value="item.id" :disabled="item.disabled"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="自定义标签:" prop="tagId">
              <el-select v-model="customer.tagId" placeholder="请选择自定义标签自定义标签:" clearable
                :style="{width: '100%'}">
                <el-option v-for="(item, index) in tags" :key="index" :label="item.label"
                  :value="item.id" :disabled="item.disabled"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="客户地址：" prop="address">
              <el-input v-model="customer.address" placeholder="选填项" clearable :style="{width: '100%'}">
              </el-input>
            </el-form-item>
          </el-col>
        </el-form>
      </el-row>
      <div slot="footer">
        <el-button type="primary" @click="submit()">{{ effect }}</el-button>
        <el-button type="primary" @click="close()">关闭</el-button>
      </div>
  </div>
</template>
<script>
import { findCustomerById,addCustomer,updateCustomer } from '@/api/customer'
import { getDictByType } from '@/api/dict'

export default {
  name: "InsertCustomerView",
  props:{
    id: {
      type: Number,
      default: null
    }
  },
  data() {
    return {
      customer: {},
      rules: {
        customerName: [{
          required: true,
          message: '请输入客户名称客户名称',
          trigger: 'blur'
        }],
        customerCompany: [{
          required: false,
          message: '选填项',
          trigger: 'blur'
        }],
        phone: [{
          required: true,
          message: '请输入手机号码',
          trigger: 'blur'
        }],
        makeId: [{
          required: true,
          message: '请选择制作要求',
          trigger: 'change'
        }],
        consumeId: [{
          required: true,
          message: '请选择消费等级',
          trigger: 'change'
        }],
        levelId: [{
          required: true,
          message: '请选择客户等级',
          trigger: 'change'
        }],
        tagId: [{
          required: true,
          message: '请选择自定义标签',
          trigger: 'change'
        }],
        address: [{
          required: false,
          message: '选填项',
          trigger: 'blur'
        }],
      }
      ,
      craftLevels:[],       //制作要求
      members:[],           //客户等级
      tags:[],               //自定义标签
      consumeLevels:[]      //消费等级
     ,
      effect:"新增"

    }
  },
  mounted() {
    if (this.id){
      this.effect="修改";
      this.getCustomerById();
    }
    this.getDict("t_customer_consume");
    this.getDict("t_customer_level");
    this.getDict("t_customer_make");
    this.getDict("t_customer_time");
  },
  methods: {
    getCustomerById() {
      findCustomerById(this.id).then(res=>{
        this.customer=res;
      })
    },
    getDict(type){
      getDictByType(type).then(res=>{
        if (type==="t_customer_consume"){
          this.consumeLevels=res;
        }else if (type==="t_customer_level"){
          this.members=res;
        }else if (type==="t_customer_make"){
          this.craftLevels=res;
        }else if(type==="t_customer_time"){
          this.timeBuckets=res;
        }else if (type==="t_customer_tag"){

        }
      })
    },
    submit(){
      if (this.id){
        //修改
        updateCustomer(this.customer).then(res=>{
          if (res==0){
            alert("修改失败！");
          }else {
            alert("修改成功！");
            this.$emit("close");
          }
        })
      }else {
        //新增
        addCustomer(this.customer).then(res=>{
          if (res==0){
            alert("新增失败！");
          }else {
            alert("新增成功！");
            this.$emit("close");
          }
        })

      }
    },
    close(){
      this.$emit("close");
    }
  }
}

</script>
<style>
</style>
